<template>
  <div class="app-container" v-loading="loading" :element-loading-text="elementLoadingText">
    <el-card>
      <div flex items-center>
        <span>已用空间/总空间</span>
        <el-progress
          class="flex-1 ml-2"
          :percentage="percentage"
          :stroke-width="15"
          striped
          striped-flow
          :duration="1000"
          :color="color"
        />
        <el-button @click="getSqlFileList" ml-2 type="primary">下载数据库备份文件</el-button>
      </div>
    </el-card>

    <el-dialog @closed="currentDownload = undefined" v-model="dialogVisible" title="下载数据库备份文件" width="30%">
      <el-table @current-change="handleCurrentRowChange" highlight-current-row :data="fileListData">
        <el-table-column prop="filename" label="文件名称" align="center" />
      </el-table>
      <div class="pager-wrapper mt-2">
        <el-pagination
          background
          small
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :total="paginationData.total"
          :page-size="paginationData.pageSize"
          :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button :disabled="!currentDownload" type="primary" @click="handleDownload"> 下载 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { getUsableSpaceDataApi, getSqlFileListApi } from "@/api/operation"
import { IGetUsableSpaceResponseData, IGetSqlFileListResponseData } from "@/api/operation/types/operation"
import { computed, ref, watch } from "vue"
import { getCssVariableValue, downloadByUrl } from "@/utils"
import { usePagination } from "@/hooks/usePagination"

const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
const elementLoadingText = ref("加载中")
const loading = ref(false)
const dialogVisible = ref(false)
const UsableSpaceData = ref<IGetUsableSpaceResponseData | undefined>(undefined)
const getUsableSpaceData = () => {
  loading.value = true
  getUsableSpaceDataApi()
    .then((res) => {
      UsableSpaceData.value = res.data
    })
    .finally(() => {
      loading.value = false
    })
}

getUsableSpaceData()

const percentage = computed(() => {
  if (UsableSpaceData.value)
    return parseFloat(((UsableSpaceData.value.usableSpace / UsableSpaceData.value.totalSpace) * 100).toFixed(2))
  else return 0
})

const themeColor = getCssVariableValue("--el-color-primary")
const color = computed(() => {
  if (percentage.value <= 50) {
    return themeColor
  } else if (percentage.value <= 70) {
    return "#eebe77"
  } else {
    return "#f89898"
  }
})

const fileListData = ref<IGetSqlFileListResponseData[]>([])

const getSqlFileList = () => {
  loading.value = true
  getSqlFileListApi({ page: paginationData.currentPage, size: paginationData.pageSize })
    .then((res) => {
      fileListData.value = res.data.list
      dialogVisible.value = true
      paginationData.total = res.data.total
      console.log(res)
    })
    .finally(() => {
      loading.value = false
    })
}

const handleDownload = () => {
  currentDownload.value && downloadByUrl(currentDownload.value.fileUrl, currentDownload.value.filename)
}
const currentDownload = ref<{ fileUrl: string; filename: string } | undefined>({
  fileUrl: "",
  filename: ""
})
const handleCurrentRowChange = (e: any) => {
  currentDownload.value = e
}

/** 监听分页参数的变化 */
watch([() => paginationData.currentPage, () => paginationData.pageSize], getSqlFileList)
</script>

<style scoped lang="scss">
.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}
</style>
